<template>
	<view class="page-apply-wrapper">
		<custom-nav title="申请入会"></custom-nav>
		<view class="apply-header">
			<image class="header-bg" src="../../static/img/apply/bg.png"></image>
			<view class="apply-head_info">
				<view class="flow-item flex-act">
					<view class="flow-step">
						<!-- <up-icon name="checkmark-circle-fill" color="#FF9839" size="26"></up-icon> -->
					</view>
					<text>入会须知</text>
				</view>
				<view class="flow-line"></view>
				<view class="flow-item">
					<view class="flow-step">
						<up-icon name="checkmark-circle-fill" color="#FF9839" size="26"></up-icon>
					</view>
					<text>申请人资料</text>
				</view>
				<view class="flow-line"></view>
				<view class="flow-item">
					<view class="flow-step"></view>
					<text>公司资料</text>
				</view>
				<!-- <up-line color="#2979ff"></up-line> -->
				<view class="flow-line"></view>
				<view class="flow-item">
					<view class="flow-step"></view>
					<text>推荐人资料</text>
				</view>
			</view>
		</view>
		<view class="apply-content">
			<view class="apply-form-wrapper">
				<view class="apply-form">
					<view class="serve-item-header">
						<text class="head-b"></text>
						<text class="item-tit">选择会员类别</text>
					</view>
					<view class="apply-form-step1">
						<up-radio-group v-model="value" iconPlacement="right">
							<up-radio activeColor="#FF7139" style="width: 100%;" label="行业主席/副会长"></up-radio>
						</up-radio-group>
					</view>
					<view class="apply-form-step1">
						<up-radio-group v-model="value" iconPlacement="right">
							<up-radio activeColor="#FF7139" label="副主席/副会长"></up-radio>
						</up-radio-group>
					</view>
					<view class="apply-form-step1">
						<up-radio-group v-model="value" iconPlacement="right">
							<up-radio activeColor="#FF7139" label="委员"></up-radio>
						</up-radio-group>
					</view>
				</view>
				<view class="apply-form apply-form-step2">
					<up-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="姓名（中文）:" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<!-- <template #right>
								<up-icon name="arrow-right"></up-icon>
							</template> -->
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="性别 :" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="Name[English]：" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="身份证号码：" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="联络地址（中文）：" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="Corr. Address (English)：" prop="applyInfo.name" ref="item1"
							labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="电话：" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="传真：" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="电子邮箱：" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="学历：" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="工作年限：" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="功能界别：" prop="applyInfo.name" ref="item1" labelWidth="auto">
							<up-input v-model="model1.applyInfo.name" inputAlign="right" border="none" placeholder="请输入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
					</up-form>

					<view class="serve-item-header">
						<text class="head-b"></text>
						<text class="item-tit">专业资格</text>
					</view>

					<view class="serve-item-header">
						<text class="head-b"></text>
						<text class="item-tit">社会服务经验</text>
					</view>

				</view>

			</view>

		</view>
		<view class="apply-btn-wrapper">
			<view class="apply-btn apply-btn-pre" @click="handlePre">
				<text>上一步</text>
			</view>
			<view class="apply-btn apply-btn-next" @click="handleNext">
				<text>下一步</text>
			</view>

		</view>
	</view>
</template>

<script>
	import customNav from '../../components/custom-nav.vue'
	export default {
		components:{customNav},
		data() {
			return {
				model1: {
					applyInfo: {
						name: '',
					}
				},
				rules: {
					'applyInfo.name': {
						type: 'string',
						required: true,
						message: '不可为空',
						trigger: ['blur', 'change'],
					},
					'applyInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change'],
					},
				},
			}
		},
		methods: {
			handleNext() {
				uni.navigateTo({
					url: '/pages/apply/applyThree'
				})
			},
			handlePre() {
				uni.navigateTo({
					url: '/pages/apply/applyOne'
				})
			}
		}
	}
</script>
<style>
	.u-radio {
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.page-apply-wrapper {
		background: #f8f8ff;

		.apply-header {
			position: relative;

			.header-bg {
				width: 100%;
				height: 482rpx;
			}

			.apply-head_info {
				position: absolute;
				display: flex;
				top: 200rpx;
				justify-content: center;
				width: 100%;
				align-items: center;

				.flow-line {
					height: 2rpx;
					width: 120rpx;
					// background: #fff;
					border-top: 2rpx dashed #fff;
				}

				.flex-act {
					text {
						color: #333 !important;
					}
				}

				.flow-item {

					// position: relative;



					.flow-step {
						background: #FFFFFF;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}

					text {
						position: absolute;
						margin-left: -30rpx;
						margin-top: 10rpx;
						font-size: 25rpx;
						color: #666;
					}
				}
			}
		}

		.apply-content {
			position: relative;
			top: -130rpx;

			.apply-form {
				padding: 32rpx;
				background: #fff;
				border-radius: 20rpx;
			}

			.apply-form-step1 {
				margin: 10rpx;
			}

			.apply-form-step2 {
				margin-top: 30rpx;
				padding-bottom: 90rpx;
			}

			.serve-item-header {
				margin-bottom: 20rpx;

				.head-b {
					display: inline-block;
					width: 12rpx;
					height: 24rpx;
					background: #FF7139;

				}

				.item-tit {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 16rpx;
				}

			}
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			z-index: 10;

			.apply-btn-pre {
				width: 215rpx;
				color: #FF7139;
				border: 2rpx solid #FF7139;
			}

			.apply-btn-next {
				width: 456rpx;
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				color: #fff;
			}

			.apply-btn {
				margin: 0 auto;
				height: 96rpx;

				border-radius: 200rpx;

				text-align: center;
				font-size: 32rpx;

				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}


	}
</style>